<template>
  <ZZDialog class="roamline" title="飞行漫游">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称" width="100">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="startFly(scope.row.type)">飞行</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ZZDialog>
</template>

<script setup lang="ts">
import { onBeforeMount, onUnmounted } from 'vue';
import { useViewer } from '@/stores/viewer';
import ZZDialog from '@/common/ZZDialog.vue';
import { mandata, airdata, grounddata, modeldata } from './data';
import { LengthFormat, TimeFormat, DateFormat } from '@/utils/dateFormat';
let viewer: any; //场景视图
const tableData = [
  { name: '行人漫游', type: 'man' },
  { name: '空中漫游', type: 'air' },
  { name: '贴地漫游', type: 'ground' },
  { name: '贴模漫游', type: 'model' }
];
let flyLine: any = null;
onBeforeMount(() => {
  viewer = useViewer().viewer;
});

onUnmounted(() => {
  if (flyLine) {
    flyLine.destroy();
  }
});

function startFly(type: string) {
  let flydata: any;
  switch (type) {
    case 'man':
      if (flyLine) {
        flyLine.stop();
      }
      flydata = mandata;
      flyLine = new zz3d.FlyLine(viewer, flydata);
      flyLine.start();
      //显示popup
      flyLine.popup = {
        anchor: [0, -20], //左右、上下的偏移像素值。
        timeRender: true, //实时更新html
        html: function () {
          const params = flyLine.timeinfo;
          if (!params) return '即将开始漫游';
          const html =
            '<div style="width:200px;">' +
            '总距离：' +
            LengthFormat(flyLine.alllen) +
            '<br/>' +
            '总时间：' +
            TimeFormat(flyLine.alltimes / viewer.clock.multiplier) +
            '<br/>' +
            '开始时间：' +
            DateFormat(flyLine.startTime, 'yyyy-M-d HH:mm:ss') +
            '<br/>' +
            '剩余时间：' +
            TimeFormat((flyLine.alltimes - params.time) / viewer.clock.multiplier) +
            '<br/>' +
            '剩余距离：' +
            LengthFormat(flyLine.alllen - params.len) +
            ' <br/>' +
            '</div>';
          return html;
        }
      };
      viewer.zz.popup.show(flyLine, flyLine.property);
      break;
    case 'air':
      if (flyLine) {
        flyLine.stop();
        flydata = airdata;
        flyLine = new zz3d.FlyLine(viewer, flydata);
        flyLine.start();
      } else {
        flydata = airdata;
        flyLine = new zz3d.FlyLine(viewer, flydata);
        flyLine.start();
        new zz3d.DivPoint(viewer, {
          html: `<div>
                    <h2>欢迎来到洛阳！</h2>
                    <p>飞行漫游</p>
                    </div>`,
          anchor: [0, 0],
          position: flyLine.property,
          // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000),//按视距距离显示
          scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1)
        });
      }
      break;
    case 'ground':
      if (flyLine) {
        flyLine.stop();
      }
      flydata = grounddata;
      flyLine = new zz3d.FlyLine(viewer, flydata);
      console.log(' flyLine : ', flyLine);
      //贴地时，异步计算完成后开始
      flyLine.clampToGround(
        () => {
          //异步计算完成贴地后再启动
          //贴地后的路线值为flyLine.points
          flyLine.start();
          //显示popup
          flyLine.popup = {
            anchor: [0, -20], //左右、上下的偏移像素值。
            timeRender: true, //实时更新html
            html: () => {
              const params = flyLine.timeinfo;
              if (!params) return '即将开始漫游';
              const html =
                '<div style="width:200px;">' +
                '总距离：' +
                LengthFormat(flyLine.alllen) +
                '<br/>' +
                '总时间：' +
                TimeFormat(flyLine.alltimes / viewer.clock.multiplier) +
                '<br/>' +
                '开始时间：' +
                DateFormat(flyLine.startTime, 'yyyy-M-d HH:mm:ss') +
                '<br/>' +
                '剩余时间：' +
                TimeFormat((flyLine.alltimes - params.time) / viewer.clock.multiplier) +
                '<br/>' +
                '剩余距离：' +
                LengthFormat(flyLine.alllen - params.len) +
                ' <br/>' +
                '</div>';
              return html;
            }
          };
          viewer.zz.popup.show(flyLine, flyLine.property);
        },
        // //区别在has3dtiles标识，true时贴模型表面,false时贴地
        { has3dtiles: false }
      );
      break;
    case 'model':
      if (flyLine) {
        flyLine.stop();
      }
      flydata = modeldata;
      flyLine = new zz3d.FlyLine(viewer, flydata);
      //贴地时，异步计算完成后开始
      flyLine.clampToGround(
        () => {
          //异步计算完成贴地后再启动
          //贴地后的路线值为flyLine.points
          flyLine.start();
          //显示popup
          flyLine.popup = {
            anchor: [0, -20], //左右、上下的偏移像素值。
            timeRender: true, //实时更新html
            html: () => {
              const params = flyLine.timeinfo;
              if (!params) return '即将开始漫游';
              const html =
                '<div style="width:200px;">' +
                '总距离：' +
                LengthFormat(flyLine.alllen) +
                '<br/>' +
                '总时间：' +
                TimeFormat(flyLine.alltimes / viewer.clock.multiplier) +
                '<br/>' +
                '开始时间：' +
                DateFormat(flyLine.startTime, 'yyyy-M-d HH:mm:ss') +
                '<br/>' +
                '剩余时间：' +
                TimeFormat((flyLine.alltimes - params.time) / viewer.clock.multiplier) +
                '<br/>' +
                '剩余距离：' +
                LengthFormat(flyLine.alllen - params.len) +
                ' <br/>' +
                '</div>';
              return html;
            }
          };
          viewer.zz.popup.show(flyLine, flyLine.property);
        },
        {
          has3dtiles: true
        },
        { has3dtiles: true }
      );
      break;

    default:
      break;
  }
}
</script>
<style scoped lang="less">
.roamline {
  position: absolute;
  top: 100px;
  right: 200px;
  width: 220px;
  overflow-y: auto;
}
</style>
